<template>
	<view class="page-container">
		<!-- 订单头部 -->
		<uni-list-item class="card-header" :title="`订单ID：${order.id}`" :rightText="`订单时间：${order.createTime}`"
			:border="false">
		</uni-list-item>
		<uni-list-item>
			<template v-slot:footer>
				<uni-tag :text="orderStatus()" type="warning"></uni-tag>
			</template>
		</uni-list-item>

		<!-- 商品列表 -->
		<uni-list-item v-for="item in order.orderItemList" :key="item.id" :border="false" :thumb="item.goodsImg">
			<template v-slot:body>
				<uni-list-item direction="column" :border="false" :title="item.goodsName" :ellipsis="2" :note="item.goodsSpec">
					<template v-slot:footer>
						<view class="price-count">
							{{`${item.price} X ${item.count} = ${item.price * item.count}`}}
						</view>
					</template>
				</uni-list-item>
			</template>
		</uni-list-item>

		<!-- 订单备注 -->
		<uni-list-item title="订单备注" :note="order.note" />

		<!-- 配送信息 -->
		<uni-list-item title="配送服务" note="快递运输,工作日、双休日与节假日均可送货" />

		<!-- 收货地址 -->
		<uni-list-item title="收货姓名" :rightText="order.addressName" />
		<uni-list-item title="收货电话" :rightText="order.addressTel" />
		<uni-list-item title="收货地址" :rightText="order.addressDetail" />

		<!-- 商品总额 -->
		<uni-list-item title="商品总额">
			<template v-slot:footer>
				<view class="amount">
					￥{{order.amount}}
				</view>
			</template>
		</uni-list-item>

		<!-- 去支付按钮 -->
		<div v-if="order.id && order.status==0">
			<button type="primary" size="large" @click="onClickPay">去支付</button>
		</div>

		<!-- 删除按钮 -->
		<div v-if="order.id">
			<button type="danger" size="large" @click="onClickDelete">删除订单</button>
		</div>

	</view>
</template>

<script>
	import * as orderAPI from '@/api/order.js';

	export default {
		data() {
			return {
				order: {
					id: null,
					orderItemList: [],
					amount: 0,
				}
			};
		},

		// 生命周期方法
		onLoad(options) {
			this.order.id = options.orderId;
			this.getOrder();
		},
		methods: {
			getOrder() {
				orderAPI.getDetailById(this.order.id).then(result => {
					this.order = result.data;
				});
			},

			//订单状态格式转换
			orderStatus() {
				let status = '未知';
				switch (this.order.status) {
					case 0:
						status = '待支付';
						break;
					case 1:
						status = '已取消';
						break;
					case 2:
						status = '已支付';
						break;
				}
				return status;
			},

			onClickPay() {
				uni.showToast({ title: '支付还未实现....', icon: 'error' });
			},

			//删除订单 订单状态( 0初始 1取消 2完成)
			onClickDelete() {
				uni.showToast({ title: '删除还未实现....', icon: 'error' });
				return
				// orderAPI.deleteOrderById(this.order.id).then(() => {
				// 	uni.showToast({ title: '订单已删除' });
				// 	setTimeout(() => {
				// 		uni.navigateBack({
				// 			delta: 1
				// 		});
				// 	}, 1000);
				// });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		padding: 15px 15px 15px 15px;
	}

	.card-header {
		font-size: 14px;
		font-weight: bolder;
	}

	// 样式穿透
	::v-deep .uni-list--base {
		width: 80px;
		height: 80px;
	}

	.price-count {
		padding-top: 10px;
		font-size: 14px;
		color: $uni-text-color;
		text-align: right;
	}

	.amount {
		text-align: right;
		color: red;
		font-weight: bold;
		font-size: 14px;
	}

	uni-button {
		margin: 10px 0;
	}
</style>